<template>
 <div>

    <el-form :model="skuInfo" label-width="80px">
      <el-form-item label="spu名称">{{ spu.spuName }}</el-form-item>
      <el-form-item label="sku名称" >
        <el-input placeholder="sku名称" v-model="skuInfo.skuName"></el-input>
      </el-form-item>
      <el-form-item label="价格">
        <el-input placeholder="价格" type="number" v-model="skuInfo.price"></el-input>
      </el-form-item>
      <el-form-item label="重量">
        <el-input placeholder="重量" v-model="skuInfo.weight"></el-input>
      </el-form-item>
      <el-form-item label="规格描述">
        <el-input placeholder="规格描述" type="textarea" rows="4" v-model="skuInfo.skuDesc"></el-input>
      </el-form-item>

      <el-form-item label="平台属性">
        <el-form :inline="true" >
          <el-form-item :label="attr.attrName" v-for="attr in attrInfoList" :key="attr.id">
            <el-select placeholder="请选择" v-model="attr.attrAndValueId">
              <el-option :label="opt.valueName" :value="`${attr.id}:${opt.id}`"  v-for="opt in attr.attrValueList" :key="opt.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>

      <el-form-item label="销售属性">
        <el-form :inline="true">
          <el-form-item :label="sale.saleAttrName" v-for="sale in saleAttrList" :key="sale.id">
            <el-select placeholder="请选择" v-model="sale.saleAndValueId">
              <el-option :value="`${sale.id}:${optt.id}`" :label="optt.saleAttrValueName" v-for="optt in sale.spuSaleAttrValueList" :key="optt.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>

      <el-form-item label="图片列表">
        <el-table border :data="imageList" @selection-change="selectChange">
          <el-table-column label="操作" type="selection" ></el-table-column>
          <el-table-column label="图片">
            <template scope="{row}">
              <img :src="row.imgUrl" alt="" style="width: 100px;height: 100px;">
            </template>
          </el-table-column>
          <el-table-column label="名称">
            <template scope="{row}">
              {{ row.imgName }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template scope="{row}">
              <el-button type="primary" size="mini" @click="changeDefault(row)" v-if="row.isDefault">设为默认</el-button>
              <el-button  size="mini" v-else>默认</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>

 </div>
</template>

<script>
export default {
    name: 'skuForm',
    data(){
        return {
            imageList:[],
            attrInfoList:[],
            saleAttrList:[],
            spu:{},
            selectImageList:[],
            skuInfo:{
              // 父组件给的数据
              spuId: 0,
              tmId: 0, // 品牌id
              category3Id: 0,
              // v-model收集
              weight: "",
              skuName: "",
              skuDesc: "",
              price: 0,
              // 写代码收集
              skuDefaultImg: "",
              skuAttrValueList: [
                {
                  // attrId: 0,
                  // attrName: "string",
                  // id: 0,
                  // "skuId": 0,
                  // "valueId": 0,
                  // "valueName": "string"
                }
              ],
              skuImageList: [
                {
                  // "id": 0,
                  // "imgName": "string",
                  // "imgUrl": "string",
                  // "isDefault": "string",
                  // "skuId": 0,
                  // "spuImgId": 0
                }
              ],
              skuSaleAttrValueList: [
                {
                  // "id": 0,
                  // "saleAttrId": 0,
                  // "saleAttrName": "string",
                  // "saleAttrValueId": 0,
                  // "saleAttrValueName": "string",
                  // "skuId": 0,
                  // "spuId": 0
                }
              ],


            }
         }
    },
    methods:{
        async getData(id1,id2,spu){
          this.skuInfo.category3Id=spu.category3Id;
          this.skuInfo.tmId=spu.tmId;
          this.skuInfo.spuId=spu.id;
          this.spu=spu;
            // 图片展示列表
            let result=await this.$tradeAPI.spu.reqImageList(spu.id);
            if(result.code==200){
              result.data.forEach(element => {
                element.isDefault=1
              });
              this.imageList=result.data;
            };
            // 平台属性
            let result1=await this.$tradeAPI.spu.reqAttrInfoList(id1,id2,spu.category3Id);
            if(result1.code==200){
                this.attrInfoList=result1.data
            };
            // 销售属性
            let result2=await this.$tradeAPI.spu.reqSaleAttrList(spu.id);
            if(result2.code==200){
                this.saleAttrList=result2.data
            };

        },

        selectChange(params){
          this.selectImageList=params;
        },

        changeDefault(row){
          this.imageList.forEach(element => {
            element.isDefault=1
          });
          row.isDefault=0;
          this.skuInfo.skuDefaultImg=row.imgUrl
        },

        cancel(){
          this.$emit("changeShow",{show:0,flag:""});
          Object.assign(this._data,this.$options.data())
        },

        async save(){
          // 整理平台属性
          this.skuInfo.skuAttrValueList=[];
          this.attrInfoList.reduce((pre,element)=>{
            if(element.attrAndValueId){
              let [attrId,valueId]=element.attrAndValueId.split(":");
              let obj={attrId,valueId};
              this.skuInfo.skuAttrValueList.push(obj);
            };
          },[]);

          // 整理销售属性
          this.skuInfo.skuSaleAttrValueList=[];
          this.saleAttrList.forEach(element => {
            if(element.saleAndValueId){
              let [saleAttrId,saleAttrValueId]=element.saleAndValueId.split(":");
              let obj={saleAttrId,saleAttrValueId};
              this.skuInfo.skuSaleAttrValueList.push(obj);
            }
          });

          // 整理图片的数据
          this.skuInfo.skuImageList=this.selectImageList.map((item)=>{
            return{
              imgName:item.imgName,
              imgUrl:item.imgUrl,
              isDefault:item.isDefault,
              spuImgId:item.id
            }
          });
          let result=await this.$tradeAPI.spu.reqSaveSku(this.skuInfo);
          if(result.code==200){
            this.$message({type:"success",message:"保存成功"});
            this.$emit("changeShow",{show:0,flag:""})
          }

        }




    }



}
</script>

<style>

</style>
